<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui" >
      

    <h:head>
        <f:facet name="first">
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type" />
            <title>MapEvent2.0</title>
        </f:facet>
        <script type="text/javascript"
        src="http://maps.google.com/maps/api/js?sensor=false"></script>
    </h:head>
    <center>
        <p:panelGrid columns="1" style="width:780px">
            <f:facet name="header">
                MapEvent
            </f:facet>
        </p:panelGrid>
    </center>
    <h:body >
        <h:form id="form" prependId="false">
            <p:growl id="messages" autoUpdate="true" />

                <p:gmap id="gmap" center="3.436658158559092,-76.52252197265625"
                        zoom="13" type="HYBRID" style="width:780px;height:720px;text-align:center;display:block;margin:auto;"
                        model="#{eventosView.emptyModel}"
                        onPointClick="handlePointClick(event);" widgetVar="map">
                    <p:ajax event="overlaySelect"
                            listener="#{eventosView.onMarkerSelect}" />
                    <p:gmapInfoWindow rendered="true">
                        <p:outputPanel style="text-align:center;display:block;margin:auto;width:450px;height:460px">

                            <p:galleria id="galeria" value="#{eventosView.fotos}" var="image" style="text-align:center;display:block;margin:auto;" panelWidth="395" panelHeight="270" showCaption="true">  
                                <p:graphicImage value="/#{image.id}.jpg" cache="false"
                                                title="#{image.nombre}" width="350" height="270">
                                 
                                </p:graphicImage>
                            </p:galleria> 

                            <p:panelGrid columns="2" style="margin: 0 auto;width:425px" >
                            <h:outputLabel value="Nombre evento:" />
                            <h:outputText value="#{eventosView.nombre}" />
                            
                            <h:outputLabel value="Fecha:" />
                            <h:outputText value="#{eventosView.fecha2}" />

                            <h:outputLabel value="Hora:" />
                            <h:outputText value="#{eventosView.hora2}" />

                            <h:outputLabel value="Dirección" />
                            <h:outputText
                                value="#{eventosView.direccion}" />
                            
                            <h:outputLabel value="Tipo Evento" />
                            <h:outputText
                                value="#{eventosView.tipoEvento}" />
                            </p:panelGrid>
                           
                        </p:outputPanel>
                    </p:gmapInfoWindow>
                </p:gmap>


            <p:dialog widgetVar="dlg" showEffect="fade" closable="false"
                      position="center" resizable="false">
                <p:panelGrid columns="3" id="panel">

                    <f:facet name="header">
                        Agregar Evento
                    </f:facet>

                    <h:outputLabel for="title" value="Nombre evento:" />
                    <p:inputText id="title" value="#{eventosView.nombre}"
                                 required="true" requiredMessage="El Nombre es Requerido" />
                    <p:message for="title" display="icon" />

                    <h:outputLabel for="dir" value="Direccion:" />
                    <p:inputText id="dir" value="#{eventosView.direccion}"
                                 required="true" requiredMessage="La Dirrecion es Requerida" />
                    <p:message for="dir" display="icon" />

                    <h:outputLabel for="fecha" value="Fecha:" />
                    <p:calendar id="fecha" value="#{eventosView.fecha}"
                                widgetVar="fecha1" pattern="dd/MM/yyyy" effect="explode"
                                required="true" requiredMessage="La Fecha es Requerida" />
                    <p:message for="fecha" display="icon" />


                    <h:outputLabel for="hora" value="Hora:" />
                    <p:calendar id="hora" value="#{eventosView.hora}" widgetVar="hora1"
                                effect="explode" pattern="hh:mm a" timeOnly="true" required="true"
                                requiredMessage="La Hora es Requerida" />
                    <p:message for="hora" display="icon" />


                    <h:outputLabel for="txtEvento" value=" Tipo Evento: *" />
                    <p:selectOneMenu id="txtEvento"
                                     value="#{eventosView.selectItemTEvento}"
                                     binding="#{eventosView.txtTipoEvento}" style="width:100%"
                                     required="true" requiredMessage="El Tipo de Evento es Requerido">
                        <f:selectItem id="seleccionar" itemLabel="Seleccionar" itemValue="" />
                        <f:selectItems value="#{eventosView.tipoEventos}" />
                    </p:selectOneMenu>
                    <p:message for="txtEvento" display="icon" id="msgtEvento" />

                    <h:outputLabel for="txtImagen" value="Imagen:" />
                    <p:fileUpload id="txtImagen" label="Agregar"
                                  fileUploadListener="#{eventosView.handleFileUpload}"
                                  mode="advanced" dragDropSupport="false" sizeLimit="500000"
                                  fileLimit="5" allowTypes="/(\.|\/)(gif|jpe?g|png)$/"
                                  cancelLabel="Cancelar" uploadLabel="Guardar" update=":form:messages"/>
                    <br />


                </p:panelGrid>

                <p:panelGrid columns="2" style="margin: 0 auto;">
                    <p:commandButton id="btnAgregar" value="Agregar"
                                     action="#{eventosView.addMarker(actionEvent)}" oncomplete="markerAddComplete()"
                                     validateClient="true" update=":form:panel, :form:gmap">

                    </p:commandButton>

                    <p:commandButton id="btnCancelar" value="Cancelar" actionListener="#{eventosView.borrarCampos}" oncomplete="PF('dlg').hide()"
                                     process="@this" update=":form">
                        <p:resetInput target="panel" />
                    </p:commandButton>
                </p:panelGrid>

                <h:inputHidden id="lat" value="#{eventosView.lat}" />
                <h:inputHidden id="lng" value="#{eventosView.lng}" />
            </p:dialog>

            <script type="text/javascript">
                var currentMarker = null;
                function handlePointClick(event) {
                    if (currentMarker === null) {
                        document.getElementById('lat').value = event.latLng.lat();
                        document.getElementById('lng').value = event.latLng.lng();

                        currentMarker = new google.maps.Marker({
                            position: new google.maps.LatLng(event.latLng.lat(),
                                    event.latLng.lng())
                        });

                        PF('map').addOverlay(currentMarker);
                        PF('dlg').show();
                    }
                }

                function markerAddComplete() {

                    currentMarker.setTitle(title.value);
                    title.value = "";
                    currentMarker = null;
                    PF('dlg').hide();
                }
            </script>

        </h:form>
    </h:body>
</html>
